<template>
  <div class="home">
    <div class="top">
    
      <div class="top-t">
        
        <span>总支出￥{{ $store.getters.totalMoney.sub }}</span>
        <span>总收入￥{{ $store.getters.totalMoney.add }}</span>
      </div>
          <!-- 点击弹出筛选模态框 -->
        <div class="flex-top">
           <p @click="filShow = true" class="filShow">{{headerTitle}} <van-icon name="arrow-down" /></p>
           <p @click="showTit=true">{{currentDateFil.getFullYear()}}-{{currentDateFil.getMonth()+1}}<van-icon name="arrow-down" /></p>
           <van-popup v-model:show="showTit" position="bottom" :style="{ height: '40%' }">
            <van-datetime-picker v-model="currentDateFil" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" @confirm="filterTime"/>
          </van-popup>
        </div>
      
    </div>
    
    <div class="icon" @click="show = true">
      <van-icon name="records" />
    </div>
    <!-- 添加弹出层 -->
    <div class="popup">
      <van-popup v-model:show="show" position="bottom" :style="{ height: '75%' }">
        <div class="popup-t">
          <span @click="show = false">x</span>
          <span @click="add">确定</span>
        </div>
        <div class="popup-c">
          <div class="popup-c-c">
            <span @click="type = 'pay' " :class=" {green: type == 'pay'} ">支出</span>
            <span @click="type = 'income' " :class=" {green: type == 'income'} ">收入</span>
          </div>
          <span @click="shows = true">{{currentDate.getMonth()+1}}月-{{currentDate.getDate()}}日<van-icon name="arrow-down" /></span>
          <van-popup v-model:show="shows" position="bottom" :style="{ height: '40%' }">
            <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" @click="shows = false"/>
          </van-popup>
        </div>
        <div class="popup-con">
          ￥<input type="text" v-model="value">
        </div>
        <div class="popup-foot">
          <ul class="foot">
            <li v-for="(item, index) in list" :key="index" v-show="item.type == type" :class=" {green: item.title == title} " @click="change(item)">
              <van-icon :name="item.icon" />
              <p>{{item.title}}</p>
            </li>
          </ul>
        </div>
        <van-number-keyboard v-model="value" :show="true" :maxlength="6" extra-key="."/>
      </van-popup>
    </div>

    <!-- 添加的数据渲染 -->
    <ul class="con">
      <li>
        <div class="left">
          <p>2022-09-07</p>
          <div class="left-l">
            <!-- <span>支{{$store.getters.price.pay}}.00</span>
            <span>收{{$store.getters.price.income}}.00</span> -->
          </div>
        </div>
        <div class="right" v-for="(item, index) in $store.state.list" :key="index">
         <div class="day-title">
        <span>{{item.date.getFullYear()}} -{{item.date.getMonth()+1}} </span>
        <p>
          <!-- <span>-￥{{Math.abs(item.sub)}}</span>
          <span>+￥{{item.add}}</span> -->
        </p>
      </div>
         <div v-for="child,i in item.children" :key="i">
             <div class="right-r">
            <p>{{child.title}}</p>
            <p>{{child.time.getMonth()+1}}</p>
          </div>
          <div v-if=" item.type == 'pay' ">-{{child.value}}.00</div>
          <div v-else style="color: orange">+{{child.value}}.00</div>
         </div>
        </div>
      </li>
    </ul>

    <!-- 筛选弹出层 -->
    <div class="box">
      <van-popup v-model:show="filShow" position="bottom" :style="{ height: '80%', background: '#f5f5f5'  }">
        <div class="box-t">
          <span @click="shows = false">x</span>
          <span>请选择类型</span>
          <span></span>
        </div>
        <div class="box-t-t" @click="filterClick('全部类型')" :class=" filTitle == '全部类型' ? 'color' : '' ">全部类型</div>
        <h3>支出</h3>
        <ul class="box-c">
          <li v-for="(item ,index) in list" :key="index" @click="filterClick(item.title)" :class=" filTitle == item.title ? 'color' : '' " v-show="item.type == 'pay'">
            <p>{{item.title}}</p>
          </li>
        </ul>
        <h3>收入</h3>
        <ul class="box-c">
          <li v-for="(item ,index) in list" :key="index" @click="filterClick(item.title)" :class=" filTitle == item.title ? 'color' : '' " v-show="item.type == 'income'">
            <p>{{item.title}}</p>
          </li>
        </ul>
      </van-popup>
    </div>
    
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      show: false,//添加弹出框的状态
      headerTitle:'全部类型',
      value: '',
      showTit:false,
      list: [
        { icon: 'gift-o',  title: '餐饮',  type: 'pay'},
        { icon: 'gift-o',  title: '服饰',  type: 'pay'},
        { icon: 'gift-o',  title: '交通',  type: 'pay'},
        { icon: 'gift-o',  title: '日用',  type: 'pay'},
        { icon: 'gift-o',  title: '购物',  type: 'pay'},
        { icon: 'gift-o',  title: '学习',  type: 'pay'},
        { icon: 'gift-o',  title: '理财',  type: 'income'},
        { icon: 'gift-o',  title: '转账',  type: 'income'},
        { icon: 'gift-o',  title: '退款',  type: 'income'},
        { icon: 'gift-o',  title: '奖金',  type: 'income'},
        { icon: 'gift-o',  title: '工资',  type: 'income'},
        { icon: 'gift-o',  title: '其他',  type: 'income'},
      ],
      shows: false,//添加弹出框的日期弹出层状态
      type: 'pay',//保存type
      icon: '',
      title: '',
      filShow: false,//筛选模态框的状态
      filTitle: '',
      flag:false,
    });
    //  选择消费和支出类型
    const change = (item) => {
      data.icon = item.icon
      data.title = item.title
    }
    // 添加数据
    const add = () => {
      store.commit('add',{
        title: data.title,
        icon: data.icon,
        value: data.value,
        type: data.type,
        time: currentDate.value
      })
      data.show = false
    }
//    删选
    const filterClick = (title) => {
        data.headerTitle = title
      data.filTitle = title
      store.commit('filterClick', title)
      data.filShow = false
    }

    const currentDate = ref(new Date(2022, 8, 7));
    const currentDateFil = ref(new Date(2022, 9, 7));
    // 
    const filterTime=(val)=>{
        // currentDateFil.value =val
        data.showTit = false
        store.state.list = store.state.copylist.filter(item=>item.time.getTime() == val.getTime())
        console.log(store.state.list);
    }

    return { ...toRefs(data), currentDate, minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 10, 1), change, add, filterClick,filterTime,currentDateFil };
  },
};
</script>

<style lang='scss' scoped>
.van-icon-gift-o:before{
  font-size: 24px;
}
.color{
  background-color: #327ff3 !important;
  color: #fff;
}
.home {
  background-color: #f5f5f5;
  .top {
    height: 70px;
    background-color: #327ff3;
    padding: 10px 20px;
    color: #fff;
    p {
      display: inline-block;
      width: 100px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      background-color: rgba(0, 0, 0, 0.05);
    }
    .top-t {
      margin-top: 10px;
      span:nth-child(1) {
        margin-right: 20px;
      }
      span:nth-child(2) {
        margin-right: 20px;
      }
    }
  }
  .icon {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 30px;
    font-size: 24px;
    position: fixed;
    bottom: 50px;
    right: 50px;
    text-align: center;
    line-height: 40px;
    box-shadow: 0 0 5px 5px #ddd;
  }
  .popup{
    .popup-t{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      span:nth-child(1){
        color: #aaa;
      }
      span:nth-child(2){
        width: 50px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #327ff3;
        color: #fff;
      }
    }
    .popup-c{
      display: flex;
      padding: 10px 20px;
      align-items: center;
      justify-content: space-between;
      .popup-c-c{
        font-size: 12px;
        span{
          display: inline-block;
          width: 50px;
          height: 25px;
          line-height: 25px;
          background-color: #f5f5f5;
          color: #aaa;
          border-radius: 20px;
          text-align: center;
          margin-right: 10px;
        }
      }
      span{
        display: inline-block;
        width: 80px;
        height: 25px;
        font-size: 14px;
        text-align: center;
        line-height: 25px;
        border-radius: 20px;
        background-color: #eee;
      }
    }
    .popup-con{
      padding: 10px 20px;
      height: 50px;
      font-size: 30px;
      input{
        width: 80%;
        height: 50px;
        border: 0;
        border-bottom: 1px solid #ccc;
      }
    }
    .popup-foot{
      overflow: auto;
      .foot{
        display: flex;
        width: 150%;
        height: 55px;
        margin-top: 10px;
        li{
          margin: 0 10px;
          text-align: center;
          padding: 0 10px;
          font-size: 14px;
        }
      }
    }
  }
  .con{
    li{
      margin-top: 10px;
      padding: 0 10px;
      .left{
        display: flex;
        padding: 20px 10px;
        justify-content: space-between;
        background-color: #f9f9f9;
        .left-l{
          span:nth-child(1){
            margin-right: 20px;
          }
        }
      }
      .right{
        display: flex;
        justify-content: space-between;
        border-radius:10px;
        padding: 10px;
        background-color: #fff;
        p:nth-child(1){
          margin-bottom: 10px;
          border-radius: 0 20px 20px 0;
          background: #327ff3;
          color:#fff;
        }
      }
    }
  }
  .box{
    .van-popup{
      .box-t{
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        background-color: #ffffff;
        border-radius: 20px 20px 0 0;
        span:nth-child(1){
          color: #ccc;
        }
      }
      .box-t-t{
        width: 100px;
        height: 40px;
        background-color: #fff;
        text-align: center;
        line-height: 40px;
        margin: 10px 20px;
      }
      h3{
        color: #888;
        font-size: 14px;
        font-weight: 100;
        margin: 10px 20px;
      }
      .box-c{
        display: flex;
        flex-wrap: wrap;
        margin: 0 20px;
        li{
          width: 100px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          margin: 5px ;
          background-color: #fff;
        }
      }
    }
  }
}
.green{
  background-color: #327ff3!important;
  color:#fff!important;
}
.flex-top{
    display: flex;
    align-items: center;
    margin-top: 10px;
    justify-content: flex-end;
    
    
}

</style>
